<template>
	<view class="container">
		<view class="content">
			<view class="use-description">
<!-- 				<view class="biaoti-box">
					<image src="https://go.cdn.heytea.com/weapp/images/member/storage-value/biaoti2.png" class="biaoti" mode="widthFix"></image>
				</view> -->
				<view class="title">平台《用户政策和隐私协议》</view>
	

		<text class="example-info">
			<text>您好！欢迎您使《小镜界》应用。</text> \n
			<text>1.特别提示</text>\n
			<text>1.1为了更好地为您提供服务，请您仔细阅读这份协议。本协议是您与本应用就您登录本应用平台进行注册及使用等所涉及的全部行为所订立的权利义务规范。您在注册过程中点击“注册”等按钮、及注册后登录和使用时，均表明您已完全同意并接受本协议，愿意遵守本协议的各项规则、规范的全部内容，若不同意则可停止注册或使用本应用平台。如您是未成年人，您还应要求您的监护人仔细阅读本协议，并取得他/他们的同意。</text>\n
			<text>1.2为提高用户的使用感受和满意度，用户同意本应用将基于用户的操作行为对用户数据进行调查研究和分析，从而进一步优化服务。</text>\n
			<text>2.服务内容</text>\n
			<text>2.1《小镜界》是一个镜片定制、购买应用平台，平台内严禁一切非法、涉黄信息，违反社区运营规范者，一律封号处理。</text>\n
			<text>2.2本应用服务的具体内容由本应用制作者根据实际情况提供。</text>\n
			<text>2.3 除非本注册及服务协议另有其它明示规定，本应用所推出的新产品、新功能、新服务，均受到本协议规范。</text>\n
			<text>2.4 本应用仅提供相关的网络服务，除此之外与相关网络服务有关的设备(如个人电脑、手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费)均应由用户自行负担。</text>\n
			<text>3.使用规则</text>\n
			<text>3.1 用户帐号注册</text>\n
			<text>3.1.1使用本应用系统注册的用户，只能使用汉字、英文字母、数字、下划线及它们的组合，禁止使用空格、各种符号和特殊字符，且最多不超过16个字符(8个汉字)注册，否则将不予注册。</text>\n
			<text>3.2如发现用户帐号中含有不雅文字或不恰当名称的，《小镜界》保留取消其用户资格的权利。</text>\n
			<text>3.2.1请勿以党和国家领导人或其他社会名人的真实姓名、字号、艺名、笔名注册；</text>\n
			<text>3.2.2请勿以国家机构或其他机构的名称注册；</text>\n
			<text>3.2.3请勿注册不文明、不健康名字，或包含歧视、侮辱、猥亵类词语的帐号；</text>\n
			<text>3.2.4请勿注册易产生歧义、引起他人误解或其它不符合法律规定的帐号。</text>\n
			<text>3.3用户帐号的所有权归本应用，用户仅享有使用权。</text>\n
			<text>3.4用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本应用不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请反馈通知本应用管理人员。因黑客行为或用户的保管疏忽导致帐号非法使用，本应用不承担任何责任。</text>\n
			<text>4.责任声明</text>\n
			<text>4.1
				任何网站、单位或者个人如认为本应用或者本应用提供的相关内容涉嫌侵犯其合法权益，应及时向本应用提供书面权力通知，并提供身份证明、权属证明及详细侵权情况证明。本应用在收到上述法律文件后，将会尽快切断相关内容以保证相关网站、单位或者个人的合法权益得到保障。</text>\n
			<text>4.2用户明确同意其使用本应用网络服务所存在的风险及一切后果将完全由用户本人承担，本应用对此不承担任何责任。</text>\n
			<text>4.3本应用无法保证网络服务一定能满足用户的要求，也不保证网络服务的及时性、安全性、准确性。</text>\n
			<text>4.4本应用不保证为方便用户而设置的外部链接的准确性和完整性，同时，对于该等外部链接指向的不由本应用实际控制的任何网页上的内容，本应用不承担任何责任。</text>\n
			<text>5.知识产权</text>\n
			<text>5.1 本应用特有的标识、版面设计、编排方式等版权均属本应用享有，未经本应用许可授权，不得任意复制或转载。</text>\n
			<text>5.2 用户从本应用的服务中获得的信息，未经本应用的许可，不得任意复制或转载。</text>\n
			<text>5.3 本应用的所有内容，包括商品描述、图片等内容所有权归属于《小镜界》的用户，任何人不得转载。</text>\n
			<text>5.4 本应用所有用户上传内容仅代表用户自己的立场和观点，与本应用无关，由作者本人承担一切法律责任。</text>\n
			<text>5.5上述及其他任何本服务包含的内容的知识产权均受到法律保护，未经本应用、用户或相关权利人书面许可，任何人不得以任何形式进行使用或创造相关衍生作品。</text>\n
			<text>6.隐私保护</text>\n
			<text>6.1 本应用不对外公开或向第三方提供单个用户的注册资料及用户在使用网络服务时存储在本社区的非公开内容，但下列情况除外：</text>\n
			<text> (1)事先获得用户的明确授权；</text>\n
			<text> (2)根据有关的法律法规要求；</text>\n
			<text> (3)按照相关政府主管部门的要求；</text>\n
			<text> (4)为维护社会公众的利益。</text>\n
			<text>6.2 本应用可能会与第三方合作向用户提供相关的网络服务，在此情况下，如该第三方同意承担与本社区同等的保护用户隐私的责任，则本社区有权将用户的注册资料等信息提供给该第三方，并无须另行告知用户。</text>\n
			<text>6.3 在不透露单个用户隐私资料的前提下，本应用有权对整个用户数据库进行分析并对用户数据库进行商业上的利用。</text>\n
			<text>7.协议修改</text>\n
			<text>7.1本应用有权随时修改本协议的任何条款，一旦本协议的内容发生变动，本应用将会在本应用上公布修改之后的协议内容，若用户不同意上述修改，则可以选择停止使用本应用。本应用也可选择通过其他适当方式（比如系统通知）向用户通知修改内容。</text>\n
			<text>7.2如果不同意本应用对本协议相关条款所做的修改，用户有权停止使用本应用。如果用户继续使用本应用，则视为用户接受本应用对本协议相关条款所做的修改。</text>\n
			<text>8.通知送达</text>\n
			<text>8.1本协议项下本应用对于用户所有的通知均可通过网页公告、电子邮件、系统通知、微博管理帐号主动联系、私信、手机短信或常规的信件传送等方式进行；该等通知于发送之日视为已送达收件人。</text>\n
			<text>8.2用户对于本应用的通知应当通过本应用对外正式公布的通信地址、电子邮件地址等联系信息进行送达。</text>\n

		</text>
			</view>
		</view>
		<view class="footer" :class="{'show':footerShow}">
			<view class="agreement" @tap="agree=!agree">
				<image :src="!agree?'/static/images/common/gouxuankuang.png':'/static/images/common/round-black-selected.png'"></image>
				<view>同意《用户政策和隐私协议》</view>
			</view>
			<button type="info" :disabled="!agree" @tap="open">开始使用</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: false,
				footerShow: false
			}
		},
		onPageScroll({scrollTop}) {
			let top
			// #ifdef H5
			top = 66
			// #endif
			// #ifndef H5
			top = 100
			// #endif
			
			this.footerShow = scrollTop >= top ? true : false
		},
		methods: {
			open() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: $bg-color-white;
}

.container {
	height: auto;
	font-size: $font-size-base;
	color: $text-color-assist;
	line-height: 1.2rem;
	padding-bottom: 200rpx;
}

.toutu {
	padding: 100rpx 30rpx;
}
.content {
	padding: 0 40rpx;
}

.how-to-use {
	margin-bottom: 100rpx;
	
	.article {
		margin-bottom: 60rpx;
	}
}

.biaoti-box {
	padding: 60rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.biaoti {
		width: 320rpx;
	}
}

.use-description {
	.title {
		color: $text-color-base;
		margin: 20rpx 0;
		display: list-item;
		list-style-type: disc;
		list-style-position: inside;
		font-weight: 500;
	}
	
	.article {
		marign: 10rpx 0;
	}
}

.footer {
	z-index: 10;
	background-color: $bg-color-white;
	position: fixed;
	bottom: -200rpx;
	width: 100%;
	height: 200rpx;
	padding: 20rpx 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: $font-size-sm;
	color: $text-color-assist;
	border-top: 1rpx solid rgba($color: $border-color, $alpha: 1.0);
	transition: all 1s cubic-bezier(0, 1, 0.5, 1);
	
	&.show {
		bottom: 0;
	}
	
	.agreement {
		display: flex;
		align-items: center;
		
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
	
	button {
		font-size: $font-size-lg;
		line-height: 3.2;
	}
}
</style>
